<template>
  <div>
    <my-header></my-header>
    <div class="content">
      <!-- 1.面包屑导航 -->
      <div class="su_mbx">
        <!-- 1.1 引入面包屑导航组件 -->
        <Su-breadcrumb ref="BNlabel"></Su-breadcrumb>
        <!-- 1.2 点击增加提示标签区域 -->
        <ul>
          <li
            class="su_minlabel"
            v-show="labels !== undefined"
            v-for="(labels, i) of clicklabelarr"
            @click="removelabel(labels, i)"
            :key="i"
          >
            {{ labels }}✘
          </li>
        </ul>
      </div>
      <!-- 2. 标签导航栏 -->
      <div class="content_mark">
        <div class="content_mark_top" v-for="(labels, l) of label" :key="l">
          <span>{{ labels.title }} :</span>
          <ul>
            <li :class="{ actives: number[l] == 0 }" @click="removeall(l)">
              <router-link to="">全部</router-link>
            </li>
            <li
              v-for="(labelchild, m) of arr[l]"
              :class="{ actives: labelchild == number[l] }"
              @click="
                labelloadimg_content(labelchild, m, arr[l], labels, l),
                  say(labelchild, l, $event)
              "
              :key="m"
            >
              <router-link to="">{{ labelchild }}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <!-- 3. 提示搜索栏 -->
      <Search-label
        :homekeywords="homekeywords"
        :labelarr="labelarr"
      ></Search-label>
      <!-- 4. 内容主题区域 -->
      <imgcontent :new_imgcontent="new_imgcontent"></imgcontent>
      <!-- ---------------------------------------------------------------------------------- -->
      <!-- 5. 分页查询 -->
      <pages
        v-show="page != null"
        ref="pages"
        :pagelabel="pagelabel"
        :page="page"
      ></pages>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #a9a4a4;
}
.content {
  width: 1200px;
  margin: 0 auto;
  padding: 10px 0px;
}
/* ****************************************************************************************************************************/
/* 声明标签区域样式 */
.content ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.content ul li {
  margin-bottom: 15px;
}
.su_breadcrumb a {
  /* display:block; */
  font-size: 10px;
}
.su_breadcrumb-item:last-child a {
  color: #000;
}
.su_breadcrumb-item + .su_breadcrumb-item:before {
  content: ">";
}
/* -------------------------------------------------------- */
.su_mbx {
  display: flex;
}
.su_mbx ul:last-child {
  margin-left: 20px;
}
.su_mbx ul:last-child li {
  height: 20px;
  line-height: 1;
  font-size: 12px;
  border: 1px solid #e8e8e8;
  padding: 2px;
  margin: 0px 5px;
}
.su_minlabel {
  cursor: pointer;
}
/* -------------------------------------------------------- */
.content_mark {
  border: 1px solid rgb(226, 223, 223);
  padding: 0px 25px;
  margin: 5px auto;
}
.content_mark div {
  display: flex;
  flex-wrap: nowrap;
  padding: 20px 0px 10px 0px;
  flex-direction: row;
}
.content_mark > div + div {
  border-top: 1px dashed rgb(226, 223, 223);
}
.content_mark ul {
  width: 1082px;
}
.content_mark span {
  display: block;
  width: 40px;
  margin-right: 30px;
  font-size: 14px;
  color: rgb(170, 166, 166);
}
.content_mark a {
  display: block;
  padding: 0px 7px;
  margin: 0 10px;
  font-size: 14px;
  color: rgb(109, 108, 108);
}
.content_mark li.actives a {
  color: #f00;
  background-color: #fff;
  border: 1px solid rgb(242, 242, 242);
  border-radius: 4px;
}
.content_mark a {
  border: 1px solid #fff;
}
.content_mark a:hover {
  color: #f00;
  border: 1px solid #f00;
  border-radius: 4px;
}
/* ****************************************************************************************************************************/

/* 声明提示栏样式 */
.content_search {
  display: flex;
  flex-wrap: wrap;
  border: 0px;
  padding: 0px;
  margin: 20px 0px 10px 0px;
  /* border:1px solid blue; */
}
.content_search span {
  width: 100px;
  margin-right: 10px;
  font-size: 10px;
}
.content_search a {
  font-size: 10px;
}
.content_search a:hover {
  border: 1px solid #fff;
}
ul.search {
  background: #fff;
}
/* ****************************************************************************************************************************/

/* 声明内容主体区域样式 */
.content_content:after {
  content: "";
  display: block;
  clear: both;
}
.content_content_v {
  width: 23%;
  float: left;
  padding-bottom: 10px;
  margin-bottom: 20px;
  margin-left: 30px;
  border: 1px solid rgb(201, 198, 198);
}
.content_content_v:nth-child(4n + 1) {
  margin-left: 0px;
}
.content_content_v > a {
  display: block;
  margin-bottom: 10px;
}
.content_content_v img {
  width: 100%;
}
.content_content .content_content_title,
.content_content .content_content_label {
  padding: 5px 15px;
  display: flex;
  flex-wrap: nowrap;
}
.content_content .content_content_title {
  justify-content: space-between;
}
.content_content .content_content_title span {
  font-size: 14px;
  color: #5c5a5a;
}
.content_content .content_content_title a {
  height: 20px;
  line-height: 20px;
  display: block;
  color: #000;
  font-size: 14px;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content_content .content_content_title a:hover {
  color: #f00;
}
.content_content_label {
  font-size: 10px;
}
.content_content_label img {
  width: 15%;
  border-radius: 50%;
}
.content_content_label div {
  margin: 0px 5px;
}
.content_content_label a {
  color: rgb(39, 119, 240);
}
.content_content_label a:hover {
  text-decoration: underline;
}
/* ******************************************************************************************** */
/* 分页查询样式 */
.content .limit {
  margin: 100px auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.content .limit ul {
  /* display:flex; */
  /* flex-wrap:nowrap; */
  justify-content: center;
  margin: 0px;
  padding: 0px 5px;
}
.content .limit ul li {
  margin: 0px;
  display: flex;
}
.content .limit a {
  text-align: center;
  display: block;
  border: 1px solid rgb(206, 205, 205);
  padding: 2px;
  line-height: 30px;
  width: 32px;
}
.content .limit span a {
  width: 70px;
}
/* a标签伪类声明 */
.content li.actives a {
  background: #f00;
  color: #fff;
}

.content .limit a:hover {
  background: rgb(46, 117, 203);
  color: #fff;
}

.content .limit a:actives {
  background: #f00;
  color: #fff;
}
.content .limit ul li:last-child:before {
  display: block;
  width: 32px;
  height: 32px;
  /* background:red; */
  content: "…";
  text-align: center;
}
</style>

<script>
import axios from "axios";
// 引入面包屑导航组件
import SuBreadcrumb from "../components/sukai/breadcrumb.vue";
//引入搜索栏组件
import SearchLabel from "../components/sukai/SearchLabel.vue";
//引入主题内容区域组件
import imgcontent from ".././components/sukai/imgcontent.vue";
//引入页码组件
import pages from "../components/sukai/pages.vue";
//引入封装好的ajax请求
import { Alldetail, VoidPath } from "../api/sukai";
//引入封装好的添加图片数量函数
import { addimgcount } from "../callback/sukai";

export default {
  props: ["homekeywords"], //上级组件跳转传递模块编号
  data() {
    return {
      homePagehomekeywords: "",
      BNlabel: "", //面包屑导航数据变量
      label: [], //点击数据标签数组
      arr: [], //标签内层遍历数组
      searchlabel: [], //搜索标签数据对象
      imgcontent: [], //原始保存主体内容数据数组
      api: "", //判断接口使用API数据
      // labelapi:"",										//
      detailskeywords: "", //跳转详情页路由传递参数
      labelarr: [], //,
      new_imgcontent: [], //使用新数据表数据重新加载主体内容区域内容
      search_imgcontent: [], //模糊查询筛选总数据
      pagelabel: "", //页码总数(传递组件使用)
      page: 1, //当前页码(传递组件使用,组件点击事件改变赋值)    (改为homepage存进sessionStorage,有问题,未实现)
      clicklabelarr: [], //点击追加标签数组
      number: [0, 0, 0, 0, 0, 0], //(改进将number存进sessionStorage)
      count: 20, //每页显示数量
    };
  },
  methods: {
    // 0  重新请求加载内容数据
    async loadimgcontent() {
      this.sessionStorageGet();
      console.log(
        "第一次sessionstorage加载:",
        this.imgcontent,
        this.new_imgcontent,
        this.number,
        this.search_imgcontent,
        this.clicklabelarr,
        this.homePagehomekeywords,
        this.homekeywords
      );
      // if(){}
      var jzuseimgcontnet;

      if (this.homePagehomekeywords == this.homekeywords) {
        // console.log("执行了第一步判断:结果为相等");
        // console.log(this.imgcontent.length);
        if (this.imgcontent.length != 0 || this.imgcontent != undefined) {
          // console.log("执行了第二步判断:结果为刷新加载");
          // console.log(
          //   "sessionstorage加载:",
          //   this.imgcontent,
          //   this.new_imgcontent,
          //   this.number,
          //   this.search_imgcontent,
          //   this.clicklabelarr,
          //   this.homePagehomekeywords
          // );
          // console.log(this.sessionStorageSet())
          this.sessionStorageSet(
            this.page,
            this.number,
            this.clicklabelarr,
            this.imgcontent,
            this.new_imgcontent,
            this.search_imgcontent,
            this.homePagehomekeywords
          );
          // console.log(
          //   "sessionstorage加载:",
          //   this.imgcontent,
          //   this.new_imgcontent,
          //   this.number,
          //   this.search_imgcontent,
          //   this.clicklabelarr,
          //   this.homePagehomekeywords
          // );

          this.limitloadimg_content(this.page);
          // jzuseimgcontent = search_imgcontent;
        } else {
          // console.log("执行了第二步判断:结果为组件组件第一次加载");
          // --------------------------------------------------------------------
          var obj = { Psid: `${this.homekeywords}`, page: `${this.page}` };
          const result = await VoidPath("/picturedetail", obj);
          // console.log("这是二级页面重新加载的数据:", result);
          addimgcount(result);
          result.forEach((item, i) => {
            if (item.Psid == this.homekeywords) {
              this.imgcontent.push(item);
            }
          });
          // console.log(this.imgcontent);
          // -------------------------------------------------------------------------
          // jzuseimgcontent = this.imgcontent;
          var mincount = (this.page - 1) * 20;
          var maxcount = this.page * 20;
          this.pagelabel = Math.ceil(this.imgcontent.length / this.count);
          this.new_imgcontent = this.imgcontent.slice(mincount, maxcount);
          this.$refs.pages.pageArray(this.page, this.pagelabel);
          this.sessionStorageSet(
            this.page,
            this.number,
            this.clicklabelarr,
            this.imgcontent,
            this.new_imgcontent,
            this.search_imgcontent,
            this.homePagehomekeywords
          );
        }
      } else {
        // console.log(
        //   "执行了第一步判断:结果为false,模块发生变化,进行该模块第一次加载"
        // );
        var obj = { Psid: `${this.homekeywords}`, page: `${this.page}` };
        const result = await VoidPath("/picturedetail", obj);
        // console.log("这是二级页面重新加载的数据:", result);
        addimgcount(result);
        // console.log(this.imgcontent);
        result.forEach((item, i) => {
          if (item.Psid == this.homekeywords) {
            this.imgcontent.push(item);
          }
        });
        // console.log(this.imgcontent);
        // -------------------------------------------------------------------------
        // jzuseimgcontent = this.imgcontent;
        var mincount = (this.page - 1) * 20;
        var maxcount = this.page * 20;
        this.pagelabel = Math.ceil(this.imgcontent.length / this.count);
        this.new_imgcontent = this.imgcontent.slice(mincount, maxcount);
        this.$refs.pages.pageArray(this.page, this.pagelabel);
        //模块初次加载时，（this.homePagehomekeywords，this.clicklabelarr，this.number，this.search_imgcontent点击第一次模块时这几个为空，更换模块进入时不为空，需要置空和赋值）
        this.homePagehomekeywords = this.homekeywords;
        this.clicklabelarr = [];
        this.number = [0, 0, 0, 0, 0];
        this.search_imgcontent = [];
        this.sessionStorageSet(
          this.page,
          this.number,
          this.clicklabelarr,
          this.imgcontent,
          this.new_imgcontent,
          this.search_imgcontent,
          this.homePagehomekeywords
        );
        // console.log(
        //   this.page,
        //   this.number,
        //   this.clicklabelarr,
        //   this.imgcontent,
        //   this.new_imgcontent,
        //   this.search_imgcontent,
        //   this.homePagehomekeywords
        // );
      }
    },
    // 1. 面包屑导航栏数据请求与处理函数
    async jiazaibnlabel() {
      const result = await VoidPath("/bnlabel");
      // console.log(result);
      this.BNlabel = result;
      this.BNlabel = this.BNlabel[this.homekeywords];
      this.$refs.BNlabel.jiazaiBNlabel(this.BNlabel);
      console.log("这是面包屑导航的数据:", this.BNlabel);
    },
    // 2. 查询标签栏请求与数据处理函数
    async jiazailabel() {
      var labelapi;
      // 0. 判断上一级组件传递参数确定请求数据表
      if (this.homekeywords == 0) {
        labelapi = "/piclabel";
      } else if (this.homekeywords == 1) {
        labelapi = "/arrlabel";
      } else if (this.homekeywords == 2) {
        labelapi = "/clolabel";
      } else if (this.homekeywords == 3) {
        labelapi = "/follabel";
      }
      const result = await VoidPath(`${labelapi}`);
      // console.log(result, typeof result);
      this.label = result;
      // 根据接口返回值在此处使用for of 遍历数组内部对象,将对象中前几位不需要加载的值进行过滤,最终将遍历产生新对象推入数组内,产生过滤之后的数组(只包含标签类型值的新数组)以供标签栏内部小标签进行v-for来使用
      // 外层遍历,产生数组内单个对象
      for (var k of this.label) {
        var i = 0,
          m = 0;
        var arr2 = [];
        // 内层循环使用新对象接收旧对象特定位置参数
        for (var n in k) {
          // 使用 外层变量i来控制所需属性值位置,&&之后表示对为空的属性值进行过滤
          if (i > 3 && k[n] !== "" && k[n] !== " ") {
            arr2[m] = k[n];
            m++;
            // console.log(i,k,n,k[n])
          }
          i++;
        }
        // 将每次遍历产生的对象推入数组内
        this.arr.push(arr2);
        // console.log("这是查询标签标签的数据:", this.arr);
      }
    },
    // 3. 提示搜索栏标签请求与数据处理函数
    async loadsearchlabel() {
      // console.log(this.homekeywords);
      // var obj = {Psid:`${this.homekeywords}`};
      // const result = await VoidPath('/picsearchlabel',obj)
      // // console.log(result,this.labelarr);
      // this.labelarr=result;
      // console.log("zheshi",this.labelarr)
      axios
        .get("/picture/picsearchlabel", {
          params: {
            Psid: `${this.homekeywords}`,
          },
        })
        .then((results) => {
          // console.log(results.data, this.labelarr);
          this.labelarr = results.data;
          // console.log("zheshi", this.labelarr);
          // console.log(this.labelarr[0][0].Psid)
        });
    },
    // 4. 获取模块分页页码总数(设置每页显示20条)(使用封装ajax报错)(已使用处理数组方法实现，此处无效)
    async loadpagelabel() {
      // var obj = {Psid:`${this.homekeywords}`};
      // axios.get("/pagecount",{params:{Psid:`${this.homekeywords}`}}).then(result=>{
      // 	this.pagelabel=result.data[0].count;
      // 	console.log(result)
      // 	this.pagelabel=Math.ceil(parseInt(this.pagelabel)/20);
      // 	console.log(this.pagelabel);
      // 	this.$refs.pages.pageArray(this.page,this.pagelabel)
      // })
      // -----------------------------------------------------------------------------------------
      // const result = await VoidPath('/pagecount',obj);
      // this.pagelabel=result[0].count;
      // console.log(result)
      // this.pagelabel=Math.ceil(parseInt(this.pagelabel)/20);
      // console.log(this.pagelabel);
      // this.$refs.pages.pageArray(this.page,this.pagelabel)
    },
    // 5. 分页查询,点击页码重新加载注意内容数据
    async limitloadimg_content(pages) {
      // console.log(pages, this.clicklabelarr.length);
      // 1. 当点击标签数组为空时，使用模块总数据进行分页数据加载，切换分页
      if (this.clicklabelarr.length == 0) {
        // console.log("nohao");
        // if(pages>=1&&pages<=this.pagelabel&&pages!=this.page){
        // console.log("buhaobuhao");
        this.page = pages;
        var mincount = (this.page - 1) * 20;
        var maxcount = this.page * 20;
        this.pagelabel = Math.ceil(this.imgcontent.length / this.count);
        this.new_imgcontent = this.imgcontent.slice(mincount, maxcount);
        // this.$refs.pages.pageArray(this.page,this.pagelabel)
        // }
        // 2. 当点击标签数组不为空时，使用备份出的查询数组数组进行加载
      } else {
        if (pages >= 1 && pages <= this.pagelabel && pages != this.page) {
          this.page = pages;
          var mincount = (this.page - 1) * 20;
          var maxcount = this.page * 20;
          // this.pagelabel = Math.ceil(this.imgcontent.length/this.count)
          this.pagelabel = Math.ceil(
            this.search_imgcontent.length / this.count
          );
          this.new_imgcontent = this.search_imgcontent.slice(
            mincount,
            maxcount
          );
        }
      }
      this.$refs.pages.pageArray(this.page, this.pagelabel);
      window.scrollTo(0, 0);
      this.sessionStorageSet(
        this.page,
        this.number,
        this.clicklabelarr,
        this.imgcontent,
        this.new_imgcontent,
        this.search_imgcontent,
        this.homePagehomekeywords
      );

      // 旧代码
      // -------------------------------------------------------------------------------------
      //当页码在1-最大页码之间,并且不等于本页页码时重新加载数据改变当前主体内容区域数据
      // if(pages>=1&&pages<=this.pagelabel&&pages!=this.page){
      // 	this.page=pages;                            //设置页码为点击页码
      // 	var mincount = (pages-1)*20;
      // 	var maxcount =  pages*20;
      // 	console.log(this.imgcontent,this.new_imgcontent,mincount,maxcount)

      // 	this.new_imgcontent = this.imgcontent.slice(mincount,maxcount)
      // 	console.log("****************分页加载的:",this.new_imgcontent)
      // 	var obj = {Psid:`${this.homekeywords}`,page:`${pages}`};
      // 	const result = await VoidPath('/picturedetail',obj)
      // 	console.log(`这是二级页面第${pages}页加载的内容加载的数据:`,result);
      // 	//对主体区域内容进行替换更新
      // 	this.new_imgcontent=result;
      // 	console.log("长度",result.length)
      // 	// 判断添加imgurlcount属性
      // 	addimgcount(this.new_imgcontent)
      // -----------------------------------------------------------------------------------
      // }
      //滚动条置零
    },
    // 6. 模糊查询(标签查询)
    labelloadimg_content(labelcontent, a, b, c, d) {
      // console.log(labelcontent, a, b, c, d);
      // 改变number[l]值控制样式显示
      this.number[d] = labelcontent;
      //判断小标签是否已经存在于面包屑导航后显示数据，不存在给予添加
      if (this.clicklabelarr.indexOf(labelcontent) == -1) {
        this.clicklabelarr[d] = labelcontent;
        var arr = [];
        // console.log(this.clicklabelarr)
        this.clicklabelarr.forEach((item, i) => {
          // console.log(item, i);
          this.imgcontent.forEach((items, n) => {
            if (
              items.scene1 == item ||
              items.scene2 == item ||
              items.style1 == item ||
              items.style2 == item ||
              items.type == item ||
              items.useing == item
            ) {
              arr.push(items);
            }
          });
        });
        this.search_imgcontent = arr;
        // console.log(arr, arr.length);
        this.page = 1;
        var mincount = (this.page - 1) * 20;
        var maxcount = this.page * 20;
        this.pagelabel = Math.ceil(this.search_imgcontent.length / this.count);
        // console.log(mincount, maxcount, this.page, this.pagelabel);
        //根据数据长度分类选择加载(数据长度小于20时加载至末尾),否则加载20条数据
        this.new_imgcontent =
          arr.length <= 20
            ? this.search_imgcontent.slice(mincount)
            : this.search_imgcontent.slice(mincount, maxcount);
        // console.log(this.new_imgcontent);
        this.$refs.pages.pageArray(this.page, this.pagelabel);
        this.sessionStorageSet(
          this.page,
          this.number,
          this.clicklabelarr,
          this.imgcontent,
          this.new_imgcontent,
          this.search_imgcontent,
          this.homePagehomekeywords
        );
      }

      // 旧方法
      // -----------------------------------------------------------------------------------
      // console.log(labelcontent,a,b,c,d);
      // 增添面包屑导航后的提示小标签数组内容
      // 点点击标签内容不在数组内时,修改标签为数组元素内容
      // if(this.searchcount==1){
      // 	if(this.clicklabelarr.indexOf(labelcontent)==-1){
      // 		this.clicklabelarr[d]=(labelcontent);
      // 	};
      // 	// console.log(this.clicklabelarr)
      // 	axios.get(
      // 		'/labelsearch',
      // 		{
      // 			params:{Psid:`${this.homekeywords}`,keywords:`${labelcontent}`}
      // 		}
      // 	).then(result=>{
      // 		this.new_imgcontent=result.data;
      // 		this.pagelabel=Math.ceil(parseInt(result.data.length)/20);
      // 		// console.log(this.new_imgcontent,this.pagelabel);
      // 		// 判断添加imgurlcount属性
      // 		addimgcount(this.new_imgcontent)
      // 		this.searchcount += 1;
      // 	})
      // }else if(this.searchcount==2){
      // 	console.log(2222222222222222222);
      // 	this.searchcount += 1;
      // }else{
      // 	console.log(333333333333333333333333333)
      // }
      // ----------------------------------------------------------------------------
    },
    // 7. 移除面包屑导航后的提示小标签
    removelabel(labels, i) {
      this.clicklabelarr.splice(this.clicklabelarr.indexOf(labels), 1);
      // console.log(this.clicklabelarr)
      this.number[i] = 0;
      this.page = 1;
      this.sessionStorageSet(
        this.page,
        this.number,
        this.clicklabelarr,
        this.imgcontent,
        this.new_imgcontent,
        this.search_imgcontent,
        this.homePagehomekeywords
      );
      // console.log(
      //   "clicklabelarr:",
      //   this.clicklabelarr,
      //   !this.clicklabelarr,
      //   this.clicklabelarr.length
      // );
      // console.log(
      //   this.clicklabelarr.length == 0,
      //   this.clicklabelarr == "",
      //   this.clicklabelarr == null,
      //   this.clicklabelarr == undefined
      // );
      if (
        this.clicklabelarr.length == 0 ||
        this.clicklabelarr == "" ||
        this.clicklabelarr == null ||
        this.clicklabelarr == undefined
      ) {
        this.sessionStorageSet(
          1,
          [0, 0, 0, 0, 0],
          [],
          [],
          [],
          [],
          this.homePagehomekeywords
        );
        this.loadimgcontent();
      }
    },
    // 8. 点击移除本类小标签
    removeall(l) {
      // console.log(l, this.number[l]);
      var m = this.clicklabelarr.indexOf(this.number[l]);
      if (m != -1) {
        this.clicklabelarr.splice(m, 1);
      }
      // this.clicklabelarr=[];
      this.page = 1;
      this.number[l] = 0;
      // var ss = window.sessionStorage;
      // ss.setItem("userInfo",JSON.stringify(this.number))
      this.limitloadimg_content(1);
      this.sessionStorageSet(
        this.page,
        this.number,
        this.clicklabelarr,
        this.imgcontent,
        this.new_imgcontent,
        this.search_imgcontent,
        this.homePagehomekeywords
      );
    },
    // 9. 点击标签改变标签列样式
    say(m, l, e) {
      // 使用标签值作为变量绑定依据
      // this.number[l]=m;
      // console.log(111)
      // alert(`${this.number},${m},${e.offsetX}疼`)
      // var ss = window.sessionStorage;
      // ss.setItem("select",1);
      // ss.setItem("userInfo",JSON.stringify(this.number))
      // console.log(this.$store.state.userInfo)
    },
    // 10. 封装使用Sessionstroage存储缓存数据数据
    sessionStorageSet(
      homePagepages,
      homePagenumber,
      homePageclicklabelarr,
      imgcontent,
      new_imgcontent,
      search_imgcontent,
      homekeywords
    ) {
      //需要存储number,clicklabelarr
      var ss = window.sessionStorage;
      ss.setItem("homePagepages", JSON.stringify(homePagepages));
      ss.setItem("homePagenumber", JSON.stringify(homePagenumber));
      ss.setItem(
        "homePageclicklabelarr",
        JSON.stringify(homePageclicklabelarr)
      );
      ss.setItem("homePageimgcontent", JSON.stringify(imgcontent));
      ss.setItem("homePagenew_imgcontent", JSON.stringify(new_imgcontent));
      ss.setItem(
        "homePagesearch_imgcontent",
        JSON.stringify(search_imgcontent)
      );
      ss.setItem("homePagehomekeywords", JSON.stringify(homekeywords));

      // console.log(this.$store.state.homePagepags,this.$store.state.homePagenumber,this.$store.state.homePageclicklabelarr,this.$store.state.homePagehomekeywords);
      // if(this.$store.state.userInfo.length!==0){
      // 	this.number=this.$store.state.userInfo;
      // };
    },
    //11.获取sessionstorage 数据加载数据
    sessionStorageGet() {
      // console.log(this.$store.state);
      this.number = this.$store.state.homePagenumber;
      this.page = this.$store.state.homePagepages;
      this.clicklabelarr = this.$store.state.homePageclicklabelarr;
      this.imgcontent = this.$store.state.homePageimgcontent;
      this.new_imgcontent = this.$store.state.homePagenew_imgcontent;
      this.search_imgcontent = this.$store.state.homePagesearch_imgcontent;
      this.homePagehomekeywords = this.$store.state.homePagehomekeywords;
      for (var i in this.number) {
        if (this.number[i] != undefined && this.number[i] != 0) {
          this.clicklabelarr[i] = this.number[i];
        }
      }
      // console.log(this.$store.state.homePagepages,this.$store.state.homePagenumber,this.$store.state.homePageclicklabelarr);
    },
  },
  created() {
    // 0.0 加载页码组数据
    this.loadpagelabel();
    // 0.1 加载面包屑导航数据
    this.jiazaibnlabel();
    // 0.2 初始化从session中加载存储数据
    // this.sessionStorageGet();
  },
  mounted() {
    // console.log("进入挂载阶段");
    //初始加载滚动条置零
    window.scrollTo(0, 0);
    // 2. 加载便签栏数据
    this.jiazailabel();
    // 3. 加载搜索标签栏数据
    this.loadsearchlabel();
    // 4. 加载主体内容区域数据
    this.loadimgcontent();
    // 6. Sessionstroage加载刷新数据
    // this.sessionStorageload();
    document.title="婚礼纪美图模块"
  },
  watch: {},
  // 引入轮播图组件
  components: { imgcontent, pages, SearchLabel, SuBreadcrumb },
};
</script>